<script lang="ts" setup>
const props = defineProps({
    icon: {
        type: String,
        default: '#icon-wenhao'
    },
    title: {
        type: String,
        default: '页面还在设计中'//后续项目实现
    },
    message: {
        type: String,
        default: '页面原型设计尽量将高保真的展现页面的布局和交互，复杂交互逻辑会额外说明，如无特殊原因，请前端按照原型上的交互实现页面功能'//该功能考虑在后续项目实现
    }
})
// 开发中 页面

</script>
<template>
    <div class="in-dev-container">
        <div class="in-dev-img"></div>
        <div class="in-dev-msg">
            <h3>
                <jxtech-svg-icon :size="18" :icon="props.icon" />
                &nbsp; {{ props.title }}
            </h3>
            <h3>
                <span>{{ props.message }}</span>
            </h3>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.in-dev-container {
    width: 100%;
    height: 100%;
    text-align: center;
    .in-dev-img {
        position: relative;
        margin-top: 14vh;
        display: inline-block;
        width: 100%;
        height: calc(50vh - 70px);
        background: url("/@/assets/img/in-dev/inDev.png") 50% 0 no-repeat;
        background-size: contain;
    }
    .in-dev-msg {
        margin-top: 5vh;
        width: 100%;
        text-align: center;
        h3:nth-child(1) {
            color: #e89c27;
        }
        h3:nth-child(2) {
            color: #999999;
            font-weight: normal;
            margin-top: 5vh;
            font-size: 14px;
            > span {
                display: inline-block;
                width: 36em;
                line-height: 2em;
            }
        }
    }
}
</style>